<template>
  <div class="mui-numbox" data-numbox-min="1">
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input
      id="test"
      class="mui-input-numbox"
      type="number"
      value="1"
      @change="countChange"
      ref="numbox"
    />
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>

<script>
import mui from '../../lib/mui/js/mui.min.js'

export default {
  mounted() {
    // 初始化数字选择框组件
    mui('.mui-numbox').numbox()
  },
  methods: {
    countChange() {
      // 每当 文本框的数据被修改时，立即把 最新的数据，通过事件调用传递给父组件
      // console.log(this.$refs.numbox.value)
      this.$emit('getcount', parseInt(this.$refs.numbox.value))
    },
  },
  props: ['max'],
  //商品库存最大值 max值的获取：先使用watch属性监听 父组件传递过来的max值，不管被触发几次，最后都会得到一个合法的max值，而不是undefined
  // 参考MUI官方文档numbox使用：https://dev.dcloud.net.cn/mui/ui/#numbox
  watch: {
    // 属性监听
    max: function(newval, oldval) {
      mui('.mui-numbox')
        .numbox()
        .setOption('max', newval)
    },
  },
}
</script>

<style lang="scss" scoped></style>
